import { defineStore } from 'pinia'

export const useThemeStore = defineStore('theme-store', {
    state: () => ({
        bgImage: uni.getStorageSync('bgImage') || 'linear-gradient(90deg, #48b8d0, #4A879A)',
        Theme: uni.getStorageSync('theme') || `
            --primary-color:#48b8d0;
            --assist-color:#d1e4ff;
            --accent-color:#a0cfff;
            --primary-bg-color:#F9F9F9;
            --assist-bg-color:#F5F5F5;
            --accent-bg-color:#FFFFFF;
            --primary-text-color:#000000;
            --assist-text-color:#333333;
            --inverse-text-color:#ffffff;
            --btn-bg-color:#48b8d0;
            --btn-text-color:#ffffff;
            --border-color:#EEEEEE;
            --statusBarHeight:${uni.getSystemInfoSync().statusBarHeight}px
        `,
        themeName: uni.getStorageSync('themeName') || '蓝色主题'
    }),

    getters: {
        currentBgImage: (state) => state.bgImage,
        currentTheme: (state) => state.Theme,
        currentThemeName: (state) => state.themeName,
        themeVariables: (state) => {
            const vars = {}
            state.Theme.split(';').forEach(item => {
                const [key, value] = item.split(':')
                if (key && value) vars[key.trim()] = value.trim()
            })
            return vars
        }
    },

    actions: {
        setBgImage(bgImage) {
            this.bgImage = bgImage
            uni.setStorageSync('bgImage', bgImage)
        },

        setTheme(themeConfig) {
            const style = themeConfig.value
                .map(item => `${item.name}:${item.value}`)
                .join(';')
            
            this.Theme = style
            this.themeName = themeConfig.name
            this.bgImage = themeConfig.bgImage
            
            uni.setStorageSync('theme', style)
            uni.setStorageSync('themeName', themeConfig.name)
            uni.setStorageSync('bgImage', themeConfig.bgImage)
        },

        resetTheme() {
            const defaultTheme = `
                --primary-color:#48b8d0;
                --assist-color:#d1e4ff;
                --accent-color:#a0cfff;
                --primary-bg-color:#F9F9F9;
                --assist-bg-color:#F5F5F5;
                --accent-bg-color:#FFFFFF;
                --primary-text-color:#000000;
                --assist-text-color:#333333;
                --inverse-text-color:#ffffff;
                --btn-bg-color:#48b8d0;
                --btn-text-color:#ffffff;
                --border-color:#EEEEEE;
                --statusBarHeight:${uni.getSystemInfoSync().statusBarHeight}px
            `
            
            this.Theme = defaultTheme
            this.themeName = '蓝色主题'
            this.bgImage = 'linear-gradient(90deg, #48b8d0, #4A879A)'
            
            uni.setStorageSync('theme', defaultTheme)
            uni.setStorageSync('themeName', '蓝色主题')
            uni.setStorageSync('bgImage', 'linear-gradient(90deg, #48b8d0, #4A879A)')
        }
    }
})